<template>
    <div class="content">
        <div class="left">
            <!-- 游客 tourist -->
             <Tourist/>
             <!-- 男女比例 sex -->
             <Sex/>
              <!-- 年龄比例 age -->
             <Age/>
        </div>
        <div class="center">
            <ChinaEcharts />
            <Capacity />
        </div>
        <div class="right">
            <Area />
            <Year />
            <Order />
        </div>
    </div>
</template>

<script setup lang="ts">
import Tourist from './son/tourist.vue'
import Sex from './son/sex.vue'
import Age from './son/age.vue'
import ChinaEcharts from './son/chinaEcharts.vue';
import Capacity from './son/capacity.vue';
import Area from './son/area.vue';
import Year from './son/year.vue';
import Order from './son/order.vue';


</script>

<style scoped lang="scss">
.content {
    width: 100%;
    height: 95%;
    display: flex;    

    .left,.right {
        flex: 1.5;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .center {
        flex: 2;
        display: flex;
        flex-direction: column;
    }
}

</style>